本博文不作深入研究内容,只用来记录使用React 组件化+wepack+ES6技术操作Openlayers 3 实践中遇到的问题,本博文作为开篇,所以只是简单的demo案例说明。后面还会有其他的一些博文分享我在项目中遇到的问题和总结的经验。
大约一年前我写过一个系列的Openlayers 3的简单的源码结构的分析,代码以及说明在我的github中有,需要的同学出门右转。
Openlayers 3的简单的源码结构的分析 https://github.com/zrysmt/openlayers-3
我在github上看到一些人将openlayers彻底组件化,属性通过props传入进来,例如:
1 | <layer.Tile> |
这样做的好处是高度组件化,看起来很和谐。但是这样无形中增加了学习成本和时间成本,我们要看到ol3的API,然后再考虑到转化为组件化的书写的对应形式,导致了多走一步。
本博文的思想很简单,就是外壳用react组件封装,内部的源码实现使用ol3的API完全没有改变,这样就简单清晰而且避免多走一步。具体例子见下面给出的Demo。
我还将我写的一些组件,比如基础地图,工具栏和绘制栏用React写的组件单独从项目中拿出来,提供给使用和学习者一些方便,下面给出地址,欢迎fork,star,不定期更新,有错误请指出:
1.一些问题总结
问题1:npm安装的问题:
1 | Failed at the closure-util@1.18.0 postinstall script 'node ./bin/closure-util.js update' |
解决方案:
1 | 首先 npm i closure-util --save |
问题2:
1 | WARNING in ./~/openlayers/dist/ol.js` |
修改webpack.config.js
1 | module: {// ... |
2.基本Demo
olbasemap.jsx
1 | import React from 'react'; |
olbasemap.scss
1 | #map{ |
3.调用天地图
1 | /** |
此时有个问题,假设我们要把map
变量传出去,供其他的组件使用,子类和父类之间的传值可以通过props和回调函数完成;现在我们做的组件其实是兄弟关系,怎么将map
做成通用呢,经过考虑我们决定使用发布-订阅模式,涉及到各个组件的变量的都在组件内部定义,然后通过发布-订阅模式将一些事件集中管理起来。此外我们还组织将变量放到构造函数中。
于是我们可以这样修改
1 | /** |
在兄弟模块中该调用的模块中调用下面的关键代码即可
1 | Eventful.dispatch('zoomtoall'); |
最后列下来发布-订阅模式的代码Eventful.js
1 | /** |
参考阅读